<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style scoped>
    /* 容器样式，在每个卡片下方增加一些间距 */
    .ticket-details-container {
        margin: 20px;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .sold-out {
        color: #F56C6C;
        font-weight: bold;
    }

    .seat-info-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .seat-block {
        display: flex;
        align-items: center;
        margin-right: 24px;
        margin-bottom: 8px;
    }

    .seat-block span {
        margin: 0 8px;
    }


         /* 新增：确保 el-container 填充整个视口高度 */
     .el-container {
         height: 100vh;
         display: flex;
         flex-direction: column;
     }

    /* 调整 iframe 容器样式 */
    .iframe-container {
        flex: 1;
        display: flex;
        padding: 0;
        margin: 0;
        min-height: 0; /* 重要：修复 flex 容器内的滚动问题 */
    }

    iframe {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
        background: white;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

</style>
<body>
<div id="app">
    <el-container>
        <el-header style="background-color: #1E88E5; padding: 0 20px;">
            <div style="display: flex; align-items: center; height: 100%; justify-content: space-between;">
                <span style="margin-right: 20px; color: white; font-size: 18px; font-weight: bold;">欢迎使用TBT火车订票系统</span>

                <div style="display: flex; align-items: center;">
                    <el-menu
                            :default-active="activeIndex"
                            class="el-menu-demo"
                            mode="horizontal"
                            @select="handleMenuSelect"
                            background-color="transparent"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            style="border-bottom: none;">
                        <el-menu-item index="1">购票</el-menu-item>
                        <el-menu-item index="2">乘客信息</el-menu-item>
                        <el-menu-item index="3">我的订单</el-menu-item>
                    </el-menu>

                    <el-button
                            v-if="!userName"
                            type="primary"
                            plain
                            style="margin-left: 30px; border-color: white; color: white; background-color: transparent;"
                            @click="handleLogin">
                        登录/注册
                    </el-button>

                    <el-dropdown v-else @command="handleUserCommand">
                        <span class="el-dropdown-link" style="color: white; margin-left: 30px; cursor: pointer;">
                            你好，<span style="text-decoration: underline;">{{ userName }}</span>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </el-header>

        <div class="iframe-container">
            <iframe :src="activeUrl"></iframe>
        </div>


    </el-container>


</div>

<script src="../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                activeIndex: '1',
                activeUrl: 'page/bookTicket2.html',
                isLoggedIn: true,
                userName: this.getUserNameFromStorage(),
                searchForm: {
                    from: '',
                    to: '',
                    date: '',
                    trainType: ''
                },
                trainInfo: {
                    trainNum: 'G1234',
                    startStation: '北京南',
                    endStation: '上海虹桥',
                    departureTime: '2025-10-01 08:00',
                    endTime: '2025-10-01 12:30',
                    duration: '4小时30分钟',
                    remainClass0: 10,   // 有票
                    remainClass1: 25, // 有票
                    remainClass2: 0,   // 无票，将显示售罄
                    remainClass3: 5,          // 有票
                },
                menuList: [
                    { id: '1', name: '购票', url: 'page/bookTicket2.html' },
                    { id: '2', name: '乘客信息', url: 'page/passenger.html' },
                    { id: '3', name: '我的订单', url: 'page/myOrders.html' },
                    { id: '4', name: '车厢管理', url: 'page/coach/list.html' },
                    { id: '5', name: '订单明细', url: 'page/order/list.html' },
                    { id: '6-1', name: '每日班次', url: 'page/daily/dailyTrain.html'}
                ],
                trainList: [
                    {
                        trainNum: 'G1234',
                        startStation: '北京南',
                        endStation: '上海虹桥',
                        departureTime: '2025-10-01 08:00',
                        endTime: '2025-10-01 12:30',
                        duration: '4小时30分钟',
                        remainClass0: 10,
                        remainClass1: 25,
                        remainClass2: 0, // 售罄
                        remainClass3: 5,
                    },
                    {
                        trainNum: 'D701',
                        startStation: '上海',
                        endStation: '南京',
                        departureTime: '2025-10-01 09:15',
                        endTime: '2025-10-01 11:45',
                        duration: '2小时30分钟',
                        remainClass0: 0, // 售罄
                        remainClass1: 0, // 售罄
                        remainClass2: 120,
                        remainClass3: 88,
                    },
                    {
                        trainNum: 'K888',
                        startStation: '广州东',
                        endStation: '深圳',
                        departureTime: '2025-10-01 10:00',
                        endTime: '2025-10-01 11:20',
                        duration: '1小时20分钟',
                        remainClass0: 2,
                        remainClass1: 5,
                        remainClass2: 3,
                        remainClass3: 0, // 售罄
                    },
                ],
                pickerOptions: {
                    disabledDate(time) {
                        // 获取今天的时间（去掉时分秒）
                        const today = new Date();
                        today.setHours(0, 0, 0, 0);

                        // 计算7天后的日期
                        const sevenDaysLater = new Date(today);
                        sevenDaysLater.setDate(today.getDate() + 7);

                        // 禁用今天之前和7天之后的日期
                        return time.getTime() < today.getTime() ||
                            time.getTime() > sevenDaysLater.getTime();
                    }
                }
            };
        },
        methods: {
            getUserNameFromStorage() {
                try {
                    const userInfo = localStorage.getItem('userInfo');
                    return userInfo ? JSON.parse(userInfo).username : null;
                } catch (e) {
                    console.error('解析用户信息失败', e);
                    return null;
                }
            },
            /**
             * 处理订票按钮点击事件
             * @param {string} seatType - 座位类型, e.g., '商务座'
             * @param {object} train - 被点击的那个车次的完整信息对象
             */
            handleBookTicket(seatType, train) {
                // 现在我们可以准确地知道用户想订哪个车次的哪种票
                console.log(`准备预订 ${train.trainNum} 次列车的 ${seatType}`);
                console.log('车次详情:', train);
                this.$message({
                    message: `已选择预订 ${train.trainNum} 的 ${seatType}，请继续完成支付！`,
                    type: 'success'
                });
            },
            handleSelect(key) {
                console.log('菜单选择:', key);

            },
            handleMenuSelect(index) {
                const selectedMenu = this.menuList.find(item => item.id === index);
                if (selectedMenu) {
                    this.activeUrl = selectedMenu.url;
                }
            },
            exchangeStation() {
                const temp = this.searchForm.from;
                this.searchForm.from = this.searchForm.to;
                this.searchForm.to = temp;
            },
            search() {
                console.log('搜索条件:', this.searchForm);
                // 这里添加搜索逻辑
            },
            handleLogin() {
                this.isLoggedIn = true;
            },
            handleUserCommand(command) {
                if (command === 'logout') {
                    this.logout();
                }
            },
            logout(){
                var _this=this;
                axios({
                    method:"get",
                    url:"http://localhost:8080/user/logout",
                }).then(function (resp) {
                    if(resp.data.code === 1){
                        _this.$message({
                            showClose: true,
                            message: '登出成功！',
                            type: 'success'
                        });
                        localStorage.removeItem('userInfo');
                        location.reload();
                    }
                })
            }
        }
    });
</script>
</body>
</html>